<style lang="less">
    @import '../../styles/common.less';
    /*@import 'upload.less';*/
</style>
<template>
    <div >
        <Col span="12">
            <Card>
                <p slot="title" style="height:25px;">
                    <Icon type="plus-round"></Icon> 上传图片
                </p>
                <Form>
                    <Form-item label="图片名称" :label-width="100">
                        <Input v-model="img_name" placeholder="Enter..."></Input>
                    </Form-item>

                    <Form-item label="上传路径" :label-width="100">
                        <Input v-model="path" placeholder="Enter..."></Input>
                    </Form-item>

                    <Form-item label="选择文件" :label-width="100">
                        <Upload
                                action="/admin/user/upload"
                                :name="img_name"
                                :data="{path: path}"
                                :headers="header"
                                :show-upload-list="false"
                                :format="['jpg', 'png', 'jpeg']"
                                :max-size="5120"
                                :on-success="handleSuccess"
                                :on-exceeded-size="handleMaxSize"
                                :on-format-error="handleFormatError" >
                            <Button type="ghost" icon="ios-cloud-upload-outline">上传图片</Button>
                            <img :src="img_url" v-if="visible" style="width: 100%;margin-top: 10px;">
                        </Upload>
                    </Form-item>

                    <Form-item label="图片链接" :label-width="100">
                        <Input v-model="img_url" :readonly="true"></Input>
                    </Form-item>

                </Form>

            </Card>
        </Col>
    </div>

</template>

<script>
export default {
    name: 'uploadOne',
    data () {
        return {
            header: {'Access-Control-Allow-Origin': ''},
            path: 'images',
            img_name: '0',
            img_url: '',
            visible: false,
        };
    },
    methods: {
        handleFormatError (file) {
            this.$Notice.warning({
                title: '文件格式不正确',
                desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片'
            });
        },
        handleMaxSize (file) {
            this.$Notice.warning({
                title: '超出文件大小限制',
                desc: '文件 ' + file.name + ' 太大，不能超过 5M'
            });
        },
        handleSuccess (res, file) {
            console.log(res);
            if (res.code == 0) {
                this.visible = true;
                this.img_url = res.data.img_url;
            } else {
                this.$Notice.error({
                    title: 'Error Warning',
                    desc: `Error：${res.msg}<br>`
                });
            }
        },
    },
};
</script>
